import { history } from '@@/core/history';
import { Button, Input, message, Spin } from 'antd';
import Cookies from 'js-cookie';
import React, { useEffect, useState } from 'react';
import { useSelector } from 'umi';

import type { FC } from 'react';

import type { AllReduxState } from '@/pages/ProOrder';
import type { SaasUserInfo } from '@/types/User';

import styles from './index.less';
interface Props {
  userInfo: SaasUserInfo;
  editPassword: () => void;
  editAvatar: (c: any) => void;
  editInfo: (c: any) => void;
}
const UserInfo: FC<Props> = (props) => {
  const { editAvatar, editPassword, editInfo } = props;
  const [infoLoading, setInfoLoading] = useState(false);
  // @ts-ignore
  const userInfo: SaasUserInfo = useSelector<AllReduxState>((state) => state.GLOBAL_DATA.userInfo);
  const logout = () => {
    localStorage.clear();
    Cookies.remove('saas_token'); // removed!
    history.push('Login');
    setTimeout(() => {
      message.warn('已经退出登录 请重新登录！');
    }, 100);
  };
  useEffect(() => {
    console.log(userInfo);
    if (JSON.stringify(userInfo) == '{}') {
      setInfoLoading(true);
    } else {
      setInfoLoading(false);
    }
  }, [userInfo]);
  return (
    <>
      <div className={styles.content}>
        <div className={styles.title}>用户信息</div>
        <Spin spinning={infoLoading}/>
        <div className={styles.centerContent}>
          <div onClick={editAvatar} className={styles.avatar}>
            <img src={userInfo?.avatar} alt="" />
          </div>
          <div className={styles.userInfo}>
            <div />
            <div>
              <div className={styles.infoContent}>
                <span>
                  <span>姓名：</span> <span>{userInfo?.name}</span>
                </span>
                <span onClick={() => { message.info('暂无此功能');}} />{' '}
              </div>
              <div className={styles.infoContent}>
                <span>
                  <span>手机：</span> <span>{userInfo?.mobileNo}</span>
                </span>
                <span />{' '}
              </div>
              <div className={styles.infoContent}>
                <span>
                  <span>邮箱：</span> <span>{userInfo?.email}</span>
                </span>
                <span onClick={() => { message.info('暂无此功能');}} />{' '}
              </div>
              <div className={styles.password}>
                <span>
                  <span>密码：</span> <Input type={'password'} value={userInfo?.password} />
                </span>
                <span onClick={() => editPassword()}>更改</span>{' '}
              </div>
              <div className={styles.infoContent}>
                <span>
                  <span>微信：</span> <span>{userInfo?.weChatId}</span>
                </span>
                <span onClick={() => { message.info('暂无此功能');}}>绑定</span>{' '}
              </div>
            </div>
          </div>
          <div className={styles.logout}>
            <Button type='primary' onClick={editInfo}>编辑信息</Button>
            <Button onClick={logout}>退出登录</Button>
          </div>
        </div>
      </div>
    </>
  );
};
export default UserInfo;
